<template>
  <section class="chart-container">
    <div class="select_top">
      <el-date-picker @change="gettimelist"
        style="width:15%;margin-right:1%"
        v-model="year"
        type="year"
        placeholder="选择年"
        :clearable="false"
        valueFormat="yyyy"
      >
      </el-date-picker>
      <el-select v-model="borgid" placeholder="责任单位" style="width:14%;margin-right:1%;">
        <el-option
          v-for="item in zrSelect"
          :key="item.hash.orgid"
          :label="item.hash.orgname"
          :value="item.hash.orgid"
        >
        </el-option>
      </el-select>
      <el-select v-model="time" clearable placeholder="考核时间" style="width:14%;margin-right:1%;">
        <el-option
          v-for="item in timelist"
          :key="item.time"
          :label="item.time_n"
          :value="item.time"
        >
        </el-option>
      </el-select>
      <el-button @click="getsaList">筛选</el-button>
      <el-button @click="doexportExcel2">导出</el-button>
    </div>
    <div class="sa_title">
      绩效汇总表
    </div>
    <!-- @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter"
      :cellClassName="tableRowClassName" -->
    <el-table
      :data="saList"
      border
      showSummary
      :summaryMethod="getSummaries"
      id="tableexcel2"
      :spanMethod="objectSpanMethod"
      style="width:92%; margin:20px auto;text-align:center"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.sup_code_name"
        label="项目类别"
      >
      </el-table-column>
      <el-table-column
        prop="hash.code_name"
        label="项目子类别"
      >
      </el-table-column>

      <el-table-column
        prop="hash.nvalue"
        label="分值上限"
      >
      </el-table-column>

      <el-table-column
        label="得分"
      >
        <template slot-scope="scope">
          <span v-if="scope.$index!=datalen-1">{{scope.row.hash.s}}</span>
          <el-input v-else min="0" v-model="extrascore" @blur="extrasave"
            style="width:70%;text-align:center"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column
        prop="hash.nname"
        label="指标"
      >
      </el-table-column>
      <el-table-column
        prop="hash.orgname"
        label="绩效考核单位"
      >
      </el-table-column>

    </el-table>
  </section>
</template>
<script>
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
  data() {
    return {
      ts: this.newStore(),
      year: '',
      datalen: '',
      zrSelect: [],
      borgid: '',
      time: '',
      timelist: [],
      saList: [],
      rowIndex: '-1',
      OrderIndexArr: [],
      OrderIndexArr2: [],
      extrascore: '',
    };
  },
  mounted() {
    // 去除hover效果
    setTimeout(() => {
      const obj = document.getElementsByClassName('el-table--enable-row-hover')[0];
      let clz = obj.getAttribute('class');
      clz = clz.replace('el-table--enable-row-hover', '');
      obj.setAttribute('class', clz);
    }, 1);
  },
  created() {
    this.year = `${new Date().getFullYear()}`;

    this.getzrList();
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index != 4) {
          sums[index] = '/';
          return;
        }

        const values = data.map(item => Number(item.hash.s));
        console.log(values, '1321321321');
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            }
            return prev;
          }, 0).toFixed(2);
          sums[index] += ' 分';
        }
      });

      return sums;
    },
    doexportExcel2() {
      /* generate workbook object from table */
      const wb = XLSX.utils.table_to_book(document.querySelector('#tableexcel2'));
      /* get binary string as output */
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '绩效汇总表.xlsx');
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout); }
      return wbout;
    },
    // tableRowClassName({ row, rowIndex }) {
    //   const arr = this.hoverOrderArr;
    //   const arr2 = this.hoverOrderArr2;
    //   for (let i = 0; i < arr.length; i += 1) {
    //     if (rowIndex == arr[i]) {
    //       return 'hovered-row';
    //     }
    //   }
    //   for (let i = 0; i < arr2.length; i += 1) {
    //     if (rowIndex == arr2[i]) {
    //       return 'hovered-row';
    //     }
    //   }
    // },
    // 获取考核时间

    gettimelist() {
      const req = {
        handle: '897AEEB66312B81B7F3B707724B3CC82D55E2FA222775EE58FFDEA701A2245DD',
        year: this.year,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // 重制time为空
        this.time = '';
        for (let i = 0; i < ts.d.data.operation1.length; i += 1) {
          const time1 = ts.d.data.operation1[i].hash.time;
          const time_a = time1.split('-');
          const timej = {};
          timej.time = time1;
          timej.time_n = `${time_a[1]}月${time_a[2]}日`;
          this.timelist.push(timej);
        }
      });
    },
    // 获取责任部门列表
    getzrList() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BC327730680009A98',
        suporgid: '2',
        start: '0',
        limit: '1000',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.zrSelect = ts.d.data.operation1;
        this.borgid = this.zrSelect[0].hash.orgid;
        this.gettimelist();
        this.getsaList();
      });
    },
    getOrderNumber() {
      const OrderObj = {};
      const OrderObj2 = {};
      this.saList.forEach((element, index) => {
        element.rowIndex = index;
        if (OrderObj[element.hash.sup_code_name]) {
          OrderObj[element.hash.sup_code_name].push(index);
        } else {
          OrderObj[element.hash.sup_code_name] = [];
          OrderObj[element.hash.sup_code_name].push(index);
        }
      });
      this.saList.forEach((element, index) => {
        element.rowIndex = index;
        if (OrderObj2[element.hash.code_name]) {
          OrderObj2[element.hash.code_name].push(index);
        } else {
          OrderObj2[element.hash.code_name] = [];
          OrderObj2[element.hash.code_name].push(index);
        }
      });

      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
      for (const k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k]);
        }
      }
      for (const k in OrderObj2) {
        if (OrderObj2[k].length > 1) {
          this.OrderIndexArr2.push(OrderObj2[k]);
        }
      }
    },


    // 合并单元格
    objectSpanMethod({
      row, column, rowIndex, columnIndex,
    }) {
      if (columnIndex == 1) {
        for (let i = 0; i < this.OrderIndexArr.length; i += 1) {
          const element = this.OrderIndexArr[i];
          for (let j = 0; j < element.length; j += 1) {
            const item = element[j];
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1,
                };
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            }
          }
        }
      }
      if (columnIndex == 2) {
        for (let i = 0; i < this.OrderIndexArr2.length; i += 1) {
          const element = this.OrderIndexArr2[i];
          for (let j = 0; j < element.length; j += 1) {
            const item = element[j];
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1,
                };
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            }
          }
        }
      }
    },
    // cellMouseEnter(row, column, cell, event) {
    //   this.rowIndex = row.rowIndex;
    //   this.hoverOrderArr = [];
    //   this.hoverOrderArr2 = [];
    //   this.OrderIndexArr.forEach((element) => {
    //     if (element.indexOf(this.rowIndex) >= 0) {
    //       this.hoverOrderArr = element;
    //     }
    //   });
    //   this.OrderIndexArr2.forEach((element) => {
    //     if (element.indexOf(this.rowIndex) >= 0) {
    //       this.hoverOrderArr = element;
    //     }
    //   });
    // },

    // cellMouseLeave(row, column, cell, event) {
    //   this.rowIndex = '-1';
    //   this.hoverOrderArr = [];
    //   this.hoverOrderArr2 = [];
    // },
    getsaList() {
      // 获取得分表
      const req = {
        handle: '897AEEB66312B81BE629958FC9E0F63E1501821CC07FAD01',
        year: this.year,
        borgid: this.borgid,
        time: this.time,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.saList = ts.d.data.operation1;
        this.datalen = ts.d.data.operation1.length;
        this.getOrderNumber();
      });
      // 获取三方测评分值
      const req1 = {
        handle: '897AEEB66312B81B7F3B707724B3CC82744144041E9718E3A17AB7EAA7EC7920',
        year: this.year,
        borgid: this.borgid,
      };
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        if (ts.d.data.operation1.length > 0) {
          this.extrascore = ts.d.data.operation1[0].hash.score;
        } else {
          this.extrascore = '';
        }
      });
    },
    // 保存三方测评分值
    extrasave() {
      const req1 = {
        handle: '897AEEB66312B81B28A72D4D3E9B018B2D8452DBF2DECB078F47F5E5DC1EC85F7B2A94823022D00C',
        year: this.year,
        borgid: this.borgid,
        score: this.extrascore,
      };
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        this.$message({
          type: 'success',
          message: '保存成功!',
        });
      });
    },
  },
};
</script>

<style lang="stylus">
.el-input__inner
  text-align center
  border 0px;

.el-table .cell
  text-align center
.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #fff !important;
}
.el-table th>.cell
  text-align center
.chart-container
  min-height 100vh
  background #f1f1f1
  width: 100%;
  float: left;
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.sa_title
  text-align center
  font-size 20px
  border-top 1px solid #cccccc
  padding-top 20px
  margin 20px auto
  width 92%
.line
  border-bottom 1px solid #ccc
  font-size 18px
  text-align center
  margin 20px 0
  padding-bottom 5px
  color black
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>

